<template>

	<view>

     <!-- 关注"前端组件开发"公众号，可申请加入前端技术交流群 -->
	 <view class="cateBox">
	 		<!-- 左侧列表 -->
	 		<scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
	 			<view class="cate-left-list" v-for="(item,index) in adata" :key="index" @click="tapselect(index,item.id)">
	 				<!-- activeItem为选中状态 -->
	 				<view class="cate-left-item " :class="{activeItem:currentTab==index}">
	 					<label></label><text>{{item.name}}</text>
	 				</view>
	 			</view>
	 		</scroll-view>
	 
	 		<!-- 右侧列表 -->
	 		<scroll-view ref="rightScrollV" class="cate-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'cate-'+mainCur"
	 			scroll-with-animation>
	 			<view v-for="(item,index) in data[0]">
	 				<view class="cate-right-title" @click="$utils.navigateTo('goods/view',{ id: item.id })">
	 					<view style="font-weight: bold;font-size: 16px;">{{item.title}}</view>
	 				</view>
					<view class="cate-right-title2" style="margin-top: 24rpx;">
						<view>{{item.address}}</view>
					</view>
								<view class="cate-right-title2">
						 					<view style="display: flex;align-items: center;"><image style="width: 20px;height: 20px;" src="../../../../static/tabber/tell.png" mode=""></image>{{item.phone}}</view>
						 					<view style="display: flex;align-items: center;"><image style="width: 20px;height: 20px;" src="../../../../static/tg_icon_1.png" mode=""></image>{{item.date_time}}</view>
						 				</view>
	 				<view class="cate-right-list">
							<scroll-view class="cate-left2" scroll-x="true" :scroll-top="verticalNavTop" scroll-with-animation style="white-space: nowrap;">
								<view style="display: flex;">
									
									
	 					<view class="cate-right-item" v-for="(child,childindex) in item.good_list" :key="childindex"
	 						@click="$utils.navigateTo('goods/view',{ id: item.id })">
	 						<image :src="child.photo" mode=""></image>
	 						<text>{{child.title}}</text>
							<view style="color: #cf666a;font-size: 26rpx;width: 50%;margin: auto;">
								￥{{child.price}}
							</view>
	 					</view>
						</view>
						</scroll-view>
	 				</view>
	 			</view>
	 			
	 			<view style="height: 260px;"></view>
	 		</scroll-view>
	 	</view>
	</view>

</template>

<script>
	export default {
		props: {

			// data: {
			// 	type: Object,
				
			// }


		},
		data() {
			return {
				adata:[],
				data:{},
				currentTab: 0,
				mainCur: 0,
				verticalNavTop: 0,
				list: [{}],

			}
		},
		mounted() {
			// this.getHeight();
			this.getdata();
			console.log(this.data,'data')
		},
		methods: {
			getdata(id){
				this.$http.getStoreAll({city_id:id}).then(res=>{
					
					this.adata = res.data.city_list
					console.log(res.data.store_list,'res.data.city_list')
				this.data[0]= res.data.store_list
				 }).catch(err=>{
				
				 }); 
			},
			itemClick(item) {

				this.$emit('itemClick', item)

			},
			//点击左侧按钮
			tapselect(index,id) {
				
				
				// // 左边侧边栏点击了
				this.currentTab = index;
				this.getdata(id);
				// // 设置右边滑动
				// this.mainCur = index;
			 //    this.verticalNavTop = (index - 1) * 50;
			
			},
			//右侧滚动
			mainScroll(e) {
				console.log("在滑动");
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						
						console.log("执行了里面在滑动");
						
						this.currentTab = i;
						// this.mainCur = i;
					    this.verticalNavTop = (i - 1) * 50
						return true
						
						
					}
				}
			},
			//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
			getHeight() {
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (let i = 0; i < this.data.length; i++) {
					let view = uni.createSelectorQuery().select("#cate-" + i)

					// #ifdef  MP-WEIXIN
					view = uni.createSelectorQuery().in(this).select("#cate-" + i);
					//	#endif


					view.fields({
						size: true
					}, data => {
						top = temp;
						bottom = temp + data.height;
						this.list[i] = {
							top: top,
							bottom: bottom
						};
						temp = bottom;
					}).exec();
				}

			}
		}


	}
</script>

<style>
	.cate-right-item text{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cateBox {
		position: absolute;
		top: 0;
		bottom: 0;
		background: #fff;
		width: 100%;
		display: flex;
	}

	.cate-left {
		width: 200rpx;
		background: #f4f4f4;
		height: 100%;
	}

	.cate-left-item {
		background: #f4f4f4;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.cate-left-item.activeItem {
		background: #fff;
	}
	/* 
 */

	.cate-left-item label {
		width: 4rpx;
		height: 15px;
		float: left;
		background: #f4f4f4;
	}

	.cate-left-item.activeItem label {
		background: #0bbbef;
	}

	.cate-left-item text {
		width: 196rpx;
		font-size: 28rpx;
		display: block;
		text-align: center;
	}

	/* 右侧*/
	.cate-right {
		flex: 1;
	}

	.cate-right-title {
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 60rpx;
		position: relative;
		    display: flex;
		    justify-content: space-between;
			padding: 0 10px;
	}

	.cate-right-title2 {
		font-size: 28rpx;
		/* margin-top: 20rpx; */
		color: #666;
		position: relative;
		margin-top: 16rpx;
		    display: flex;
		    justify-content: space-between;
			padding: 0 10px;
	}

	.cate-right-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: orange;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-right-title text {
		background: #fff;
		padding: 0 10px;
		position: relative;
		color: #000;
		font-weight: bold;
	}

	.cate-right-list {
		height: auto;
		overflow: hidden;
	}

	.cate-right-item {
		width: 33.33%;
		float: left;
		margin-top: 20rpx;
	}

	.cate-right-item image {
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
		box-shadow: 0 0 7px 1px #ddd;
	}

	.cate-right-item text {
		display: block;
		text-align: center;
		font-size: 24rpx;
		width: 50%;
		margin: 2% auto;
	}
</style>